<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jquery.mobile-1.4.5.min.css">
    <script src="../../jquery-2.2.3.js"></script>
    <script src="../../jquery.mobile-1.4.5.min.js"></script>
    <script src="../../jquery-easing.js"></script>
    <title>jquery-mobile2</title>
</head>
<body>
<div data-role="page" id="main">
    <div data-role="header">
        <h3>我的首页</h3>
    </div>
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="home" class="ui-btn-active">首页</a> </li>
            <li><a href="#" data-icon="search">搜索</a> </li>
            <li><a href="#" data-icon="home">测试</a> </li>
        </ul>
    </div>
    <div data-role="content">
        <div data-role="collapsible" data-collapsed="false" data-inset="false" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h1>点击我 - 我可以折叠！</h1>
            <p>我是可折叠的内容。</p>
        </div>
<br/>
        <div data-role="collapsible-set">
            <div data-role="collapsible">
                <h3>点击我 - 我可以折叠！</h3>
                <p>我是可折叠的内容。</p>
            </div>
            <div data-role="collapsible">
                <h3>点击我 - 我可以折叠！</h3>
                <p>我是可折叠的内容。</p>
            </div>
            <div data-role="collapsible">
                <h3>点击我 - 我可以折叠！</h3>
                <p>我是可折叠的内容。</p>
            </div>
            <div data-role="collapsible">
                <h3>点击我 - 我可以折叠！</h3>
                <p>我是可折叠的内容。</p>
            </div>
        </div>

    </div>
</div>
</body>
</html>